<template>
  <a-layout class="qpanel">
    <a-layout-sider collapsible breakpoint="xl">
      <div class="logo" />
      <a-menu
        :default-open-keys="['1']"
        :default-selected-keys="['0_1']"
        :style="{ width: '100%' }"
        @menu-item-click="onClickMenuItem"
      >
        <a-menu-item key="0_1">
          <iconpark-icon name="home"></iconpark-icon>
          概览
        </a-menu-item>
        <a-menu-item key="0_2">
          <iconpark-icon name="site"></iconpark-icon>
          网站
        </a-menu-item>
        <a-menu-item key="0_3">
          <iconpark-icon name="Db"></iconpark-icon>
          数据库
        </a-menu-item>
        <a-menu-item key="0_4">
          <iconpark-icon name="FTP"></iconpark-icon>
          FTP
        </a-menu-item>
        <a-menu-item key="0_8">
          <iconpark-icon name="FTP"></iconpark-icon>
          文件
        </a-menu-item>
        <a-menu-item key="0_5">
          <iconpark-icon name="Safe"></iconpark-icon>
          安全
        </a-menu-item>
        <a-menu-item key="0_7">
          <iconpark-icon name="Shop"></iconpark-icon>
          软件
        </a-menu-item>
        <a-menu-item key="0_6">
          <iconpark-icon name="Set"></iconpark-icon>
          设置
        </a-menu-item>
      </a-menu>

      <!-- 只显示了trigger -->
      <template #trigger="{ collapsed }">
        <IconCaretRight v-if="collapsed"></IconCaretRight>
        <IconCaretLeft v-else></IconCaretLeft>

        <IconSun v-if="sun_moon" @click="color_change" />
        <IconMoon v-else @click="color_change" />
      </template>
    </a-layout-sider>
    <a-layout>
      <a-layout>
        <a-layout-content><RouterView /></a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
//import { defineComponent } from "vue";
//import { Message } from "@arco-design/web-vue";
import {
  IconCaretRight,
  IconCaretLeft,
  IconHome,
  IconCalendar,
  IconMoon,
  IconSun,
} from "@arco-design/web-vue/es/icon";
import { ref } from "vue";
export default {
  setup() {
    console.log(localStorage.getItem("sun_moon"));
    if (localStorage.getItem("sun_moon") == null) {
      localStorage.setItem("sun_moon", true);
      var sun_moon = ref(true);
      document.body.setAttribute("arco-theme", "light");

    } else if (localStorage.getItem("sun_moon") == "true") {
      var sun_moon = ref(true);
      document.body.setAttribute("arco-theme", "light");

    } else {
      var sun_moon = ref(false);
      document.body.setAttribute("arco-theme", "dark");

    }

    //const onClickMenuItem = (key) => {
    //  Message.info({ content: `You select ${key}`, showIcon: true });
    //};

    return {
      sun_moon,
    };
  },
  components: {
    IconCaretRight,
    IconCaretLeft,
    IconHome,
    IconCalendar,
    IconMoon,
    IconSun,
  },
  methods: {
    onClickMenuItem(key) {
      if (key == "0_1") {
        this.$router.push("/home");
      }
      if (key == "0_2") {
        this.$router.push("/site");
      }
      if (key == "0_3") {
        this.$router.push("/db");
      }
      if (key == "0_4") {
        this.$router.push("/ftp");
      }
      if (key == "0_5") {
        if (localStorage.getItem('/safe')==null){
          this.$router.push("/safe/port");
        }else if(localStorage.getItem('/safe')=='ip'){
          this.$router.push("/safe/ip");
        }
      }
      if (key == "0_6") {
        if (localStorage.getItem('/set')==null){
          this.$router.push("/set/panel");
        }else if(localStorage.getItem('/set')=='panel'){
          this.$router.push("/set/panel");
        }else if(localStorage.getItem('/set')=='ssh'){
          this.$router.push("/set/ssh");
        }
      }
      if (key == "0_7") {
        this.$router.push("/soft");
      }
      if (key == "0_8") {
        this.$router.push("/file");
      }

      //Message.info({ content: `You select ${key}`, showIcon: true });
    },
    //Message.info({ content: `You select ${key}`, showIcon: true });
    color_change() {
      this.sun_moon = !this.sun_moon;
      if (this.sun_moon) {
        document.body.setAttribute("arco-theme", "light");
        localStorage.setItem("sun_moon", true);
      } else {
        document.body.setAttribute("arco-theme", "dark");
        localStorage.setItem("sun_moon", false);
      }
    },
  },
};
</script>
<style scoped>
.qpanel {
  height: 100vh;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border);
}
.qpanel :deep(.arco-layout-sider) .logo {
  height: 32px;
  margin: 12px 8px;
  background: rgba(255, 255, 255, 0.2);
}
.qpanel :deep(.arco-layout-sider-light) .logo {
  background: var(--color-fill-2);
}

iconpark-icon {
  margin-right: 16px;
  vertical-align: middle;
  font-size: 20px;
}

.qpanel :deep(.arco-layout-content) {
  font-weight: 400;
  font-size: 14px;
  background: var(--color-bg-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
}
</style>

<style scoped>
.qpanel :deep(.arco-layout-sider-children),
.qpanel :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 16px;
  font-stretch: condensed;
}

.qpanel :deep(.arco-layout-sider) {
  width: 206px;
  background-color: var(--color-menu-light-bg);
}

.qpanel :deep(.arco-layout-content) {
  background-color: var(--color-fill-2);
}
</style>
